{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap-select.css"> 
	<script src="/static/ace/js/ace.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-old_ie.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/theme-monokai.js" type="text/javascript" charset="utf-8"></script> 	
	<style type="text/css"> 
		pre {
			overflow: auto;
			white-space: normal;
			white-space: pre-wrap; /* css-3 */
			white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
			white-space: -pre-wrap; /* Opera 4-6 */
			white-space: -o-pre-wrap; /* Opera 7 */
			word-wrap: break-word; /* Internet Explorer 5.5+ */
			font-family: Consolas, monospace;
			color: #ADFF2F;
			background-color: #000000;
		}	
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
			width: 100%;
			height: 300px;
	   }   		      	
	</style>  
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div> 
        
		<div class="row">
		
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>部署脚本列表 <small>Deploy Script List</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li>
						<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div class="product_price">
	                        <div class="btn-group  pull-left">
			                	<button type="button" class="btn btn-xs btn-default" id="deploy_list"><i class="glyphicon glyphicon-plus"></i></button>  
			                </div>    
							<div class="btn-group  btn-group-sm pull-right">
		                        <button class="btn btn-default" name="script_page_next" type="button" value="">上一页</button>
		                        <button class="btn btn-default" name="script_page_previous" type="button" value="">下一页</button>
	                      	</div>
	                      	<br>
	                      	<br>		                	            
		                    <table id="deployScriptsList" class="table table-striped table-bordered">
		                      <thead>
		                        <tr>
					                <th>ID</th>
					                <th>脚本名称</th>
					                <th>最后修改人</th>
					                <th>创建时间</th>
					                <th>最后修改时间</th>
									<th class="text-center">操作</th>
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table>                          
                        </div> 
                   </div>
                </div>		
			  </div>		
		
              <div class="col-md-6 col-xs-12" id="add_deploy_tools" style="display:none;">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>部署脚本 <small>Deploy Scripts</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li>
					    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>

                  <div class="x_content">
                     <form role="form" id="deployScriptRun" data-parsley-validate class="form-horizontal form-label-left">{% csrf_token %}
						<fieldset>	
                            <div class="form-group">
                                <label class="col-sm-2 control-label" >脚本名称</label>
                                <div class="col-sm-10">
                                	<input class="form-control" name="script_name" id="script_name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">脚本描述</label>
                                <div class="col-sm-10">
	                                <textarea class="form-control" rows="3" id="script_desc" required></textarea>
                                </div>
                            </div>
							<div class="form-group" >			 		             
									<label class="col-sm-2 control-label">动态主机</label>	
									<div class="col-sm-10">
										<select class="selectpicker form-control" data-selected-text-format="count > 5" data-live-search="true" data-width="100%" name="server_model" id="server_model">
											<option value="" name="server_model" selected="selected">选择一个类型</option>
											<option value="business" name="server_model">业务项目</option>
											<option value="inventory_groups" name="server_model">主机组</option>
											<option value="group" name="server_model">使用部门</option>
											<option value="tags" name="server_model">资产标签</option>
											<option value="custom" name="server_model">自定义</option> 	
										</select>		
									</div>	
							</div>	
							<div id='project_server'  style="display:none;">
								<div class="form-group">
									 <label class="col-sm-2 control-label" >业务项目</label>
									 <div class="col-sm-10">
                                           <select class="selectpicker form-control" name="business" data-selected-text-format="count > 5" data-live-search="true" data-width="100%"  onchange="javascript:oBtProjectSelect(this);" required>
                                           	<option name="project" value="" selected="selected">请选择一个项目</option>
                                           </select>
									 </div>
								</div>										
<!-- 								<div class="form-group">
									 <label class="col-sm-2 control-label" >业务类型</label>
									 <div class="col-sm-10">
                                           <select class="selectpicker form-control" name="service" data-selected-text-format="count > 5" data-live-search="true" data-width="100%"  onchange="javascript:AssetsTypeSelect(this,'service');" required>
											<option name="service" value="" selected="selected">请选择一个应用类型</option>
                                           </select>
									 </div>
								</div>	 -->
							</div>		
							<div id='inventory_server'  style="display:none;">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" >动态资产组<i class="fa fa-info-circle" data-toggle="tooltip"  title="根据动态资产添加选择服务器"></i></label>
                                    <div class="col-sm-10">
	                                 <select class="selectpicker form-control" name="inventory" data-selected-text-format="count > 5" data-live-search="true" data-width="100%" onchange="javascript:oBtInventorySelect(this);">
	                                 </select>
                              		</div>                            		
                                </div> 
								<div class="form-group">
									 <label class="col-sm-2 control-label" >主机组</label>
									 <div class="col-sm-10">
                                           <select class="selectpicker form-control" name="inventory_groups" data-selected-text-format="count > 5" data-live-search="true" data-width="100%"  onchange="javascript:AssetsTypeSelect(this,'inventory_group');" required>
											<option name="inventory_groups" value="" selected="selected">请选择一个主机组</option>
                                           </select>
									 </div>
								</div>                                  
                            </div>																				
							<div id="group_server" class="form-group" style="display:none;">
								 <label class="col-sm-2 control-label" >使用部门</label>
								 <div class="col-sm-10">
                                       <select class="selectpicker form-control" name="group"  onchange="javascript:AssetsTypeSelect(this,'group');" required> 
                                       </select>
								 </div>
							</div>		
							<div id="tags_server" class="form-group" style="display:none;">
								 <label class="col-sm-2 control-label" >资产标签</label>
								 <div class="col-sm-10">
                                       <select class="selectpicker form-control" name="tags"  onchange="javascript:AssetsTypeSelect(this,'tags');" required> 
                                       </select>
								 </div>
							</div>																																										
							<div id="custom_server" class="form-group" style="display:none;">
								 <label class="col-sm-2 control-label" >服务器</label>
								 <div class="col-sm-10">
                                    <select multiple class="selectpicker form-control"  data-size="10" data-selected-text-format="count > 5" data-live-search="true" data-width="100%"   autocomplete="off"  class="form-control"   autocomplete="off" name="custom"  id="deploy_server" required>
                                    </select>
								 </div>
							</div>										
							<div class="form-group" >			 		             
								<label class="col-sm-2 control-label" >语言类型: </label>	
								<div class="col-sm-10">
									<div class="btn-group btn-group-sm" id="deployScriptType">
										<button type="button" name="btn-deploy-scripts" class="btn btn-default btn-sm" value="sh">Shell</button>
										<button type="button" name="btn-deploy-scripts" class="btn btn-default btn-sm" value="python">Python</button>
										<button type="button" name="btn-deploy-scripts" class="btn btn-default btn-sm" value="perl">Perl</button>
									</div>
								</div>
							</div>  
							<div class="form-group">
								<label class="col-sm-2 control-label" >脚本内容: </label>	
								<div class="col-sm-10">
									<div id="compile-editor-add" class="ace_editor"></div> 	
								</div>
							</div>												
							</fieldset>	
                            <div class="form-group">
                                <label class="col-sm-2 control-label" >脚本参数</label>
                                <div class="col-sm-10">
                                	<input class="form-control" name="script_args" id="script_args" placeholder="多个参数以空格分开">
                                </div>
                            </div> 																																																												
							<div class="form-group">
								 <label class="col-sm-2 control-label">Debug</label>
								 <div class="col-sm-10">										
										<select class="form-control" name="deploy_debug">
											<option value="off">关闭</option>	
											<option value="on">开启</option> 	
										</select>
								</div>
							</div> 																					
							</fieldset>
							<legend></legend>
							<div class="form-group">
								<label class="col-sm-5 control-label"></label>
								<input  type="hidden" class="form-control" id="model" name="model" value="model">
		                        <input  type="hidden" class="form-control" id="ans_uuid" name="ans_uuid" value="{{assets.uuid}}">  								
								<button type="button" class="btn btn-default btn-sm" id="save_deploy_script">保存</button>
								<button type="button" class="btn btn-default btn-sm" value="" id="modf_deploy_script" style="display:none;">修改</button>
								{% if perms.deploy.deploy_exec_deploy_script %}
						 			<button type="button"  class="btn btn-default btn-sm"  id="run_deploy_script">执行</button>
						 		{% else %}
						 			<button type="button"  class="btn btn-default btn-sm"  disabled>执行</button>
						 		{% endif %}
					 		</div>									 		
						</form> 
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-xs-12" id="add_deploy_result" style="display:none;">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>执行结果 <small>Results of execution</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>

                  <div class="x_content">
					<pre class="html">
                        <div id="result">
                        </div>
                    </pre>                     
                  </div>
                </div>
              </div>
		</div>
<div style="visibility:hidden">
	<a id="scrollToTop"></a>
</div>
{% endblock %}

{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>		
	<script src="/static/js/deploy/deploy.js"></script>
	<script src="/static/validator/validator.js"></script>
{% endblock %}
